/**
 * App Demo SASS
 * 
 */
html, body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  font-size: 14px; }
  html ul, html li, body ul, body li {
    padding: 0;
    margin: 0;
    list-style: none; }

.user-extend-props {
  flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  position: relative;
  height: 100%;
  overflow: hidden; }
  .user-extend-props .calDay-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    border-radius: 5px;
    transform: skew(-15deg);
    font-size: .8em; }
    .user-extend-props .calDay-box > div {
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-align-items: center;
      -webkit-justify-content: center;
      align-items: center;
      justify-content: center;
      transform: skew(15deg); }
    .user-extend-props .calDay-box .calDay-name {
      border-radius: 5px;
      transform: skew(0deg);
      width: 40px; }
    .user-extend-props .calDay-box .calDay-content {
      flex: 1; }
  .user-extend-props .top-box {
    position: absolute;
    width: calc( 100% - 100px);
    min-width: 70px;
    max-width: 110px;
    height: 25px;
    top: 7px;
    left: 10px; }
    .user-extend-props .top-box.purple {
      background-color: #3f51b5;
      color: white; }
    .user-extend-props .top-box > div:first-child {
      background-color: #5c6bc0; }
  .user-extend-props .mid-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex: 1;
    margin: 35px 0 10px 10px;
    width: calc( 100% - 20px);
    height: 100%; }
    .user-extend-props .mid-box > div.calLDay-box {
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-flex-direction: column;
      -ms-flex-direction: column;
      flex-direction: column;
      border-radius: 5px;
      margin: 5px 3px;
      font-size: .8em;
      background-color: #e1e1e1;
      width: calc( (100% - 25px) / 2.5);
      max-width: 40px;
      min-width: 30px;
      height: 100%;
      max-height: 70px;
      min-height: 50px;
      margin-top: 4px;
      color: #767676; }
      .user-extend-props .mid-box > div.calLDay-box > div {
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        height: 100%;
        -webkit-align-items: center;
        -webkit-justify-content: center;
        align-items: center;
        justify-content: center; }
        .user-extend-props .mid-box > div.calLDay-box > div:first-child {
          border-radius: 5px;
          background-color: #d6d6d6; }
      .user-extend-props .mid-box > div.calLDay-box.blue {
        background-color: #00bcd5;
        color: white; }
        .user-extend-props .mid-box > div.calLDay-box.blue > div:first-child {
          background-color: #00d3ef; }
      .user-extend-props .mid-box > div.calLDay-box.orange {
        background-color: #ff9700;
        color: white; }
        .user-extend-props .mid-box > div.calLDay-box.orange > div:first-child {
          background-color: #ffac33; }
      .user-extend-props .mid-box > div.calLDay-box.red {
        background-color: #ff5353;
        color: white; }
        .user-extend-props .mid-box > div.calLDay-box.red > div:first-child {
          background-color: #ff8686; }

.cal-tip-all {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 10px; }
  .cal-tip-all .calDay-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    border-radius: 5px;
    transform: skew(-15deg);
    font-size: .8em; }
    .cal-tip-all .calDay-box > div {
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-align-items: center;
      -webkit-justify-content: center;
      align-items: center;
      justify-content: center;
      transform: skew(15deg); }
    .cal-tip-all .calDay-box .calDay-name {
      border-radius: 5px;
      transform: skew(0deg);
      width: 40px; }
    .cal-tip-all .calDay-box .calDay-content {
      flex: 1; }
  .cal-tip-all .top-box {
    width: calc( 100% - 100px);
    min-width: 70px;
    max-width: 110px;
    height: 25px; }
    .cal-tip-all .top-box.purple {
      background-color: #3f51b5;
      color: white; }
    .cal-tip-all .top-box > div:first-child {
      background-color: #5c6bc0; }
  .cal-tip-all .cal-tip-list ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column; }
    .cal-tip-all .cal-tip-list ul li {
      width: 100%;
      margin: 6px 0; }
      .cal-tip-all .cal-tip-list ul li span {
        font-weight: 600;
        margin-right: 10px; }

.cal-tip-ctxMenu ul li {
  cursor: default;
  border-bottom: 1px solid #e8e8e8;
  padding: 10px 20px; }
  .cal-tip-ctxMenu ul li:hover {
    background-color: #26a59a;
    color: white; }
